<template>
    <div class="app-container" v-loading="loading">
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap flex-row-center-sb">
                <span>{{ needCreditReview == 1 ? '免' : '' }}信审结果</span>
                <span> <el-button type="primary" @click="goCreditDetail">信审详情</el-button> </span>
            </div>
            <div>
                <el-descriptions>
                    <template v-if="needCreditReview==2">
                        <el-descriptions-item label="信审批复建议">{{ results.creditReviewResult|creditSuggestionApproval }}</el-descriptions-item>
                        <el-descriptions-item label="审核人">{{ results.auditPerson|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="审核时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
                    </template>
                    <template v-else>
                        <el-descriptions-item label="价审通过时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
                    </template>
                </el-descriptions>

                <el-form label-width="120px">
                    <div style="margin-bottom: 20px">
                        <div class="flex-row-center">
                            <span class="quota">信审额度:</span>
                            <template v-if="results.displayType==1||results.displayType==2">
                                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                                <el-button v-if="results.displayType==1" type="primary" plain @click="voidRemainingBalance">作废剩余额度</el-button>
                            </template>
                            <template v-else>
                                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                                <template v-if="results.displayType==3">
                                    <span style="font-size: 14px;color: #8C8C8C">操作人:</span>
                                    <span class="date">{{ cancleOrderInfo.invalidOperator|filterNull }}</span>
                                    <el-button type="primary" plain @click="goVoidRemainingBalanceInfo">查看作废说明</el-button>
                                </template>
                            </template>
                        </div>

                        <div class="table-title-wrap flex-row-center">
                            <p class="statisticInfo">申请总台数: <span>{{ results.totalApplicationNumber }}</span></p>
                            <p class="statisticInfo">通过总台数: <span>{{ results.totalPassNumber }}</span></p>
                            <p class="statisticInfo">拒绝总台数: <span>{{ results.totalRejectNumber }}</span></p>
                        </div>

                        <el-table
                            :data="results.cars"
                            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                            <el-table-column
                                align="center"
                                prop="vehicleManufacturers"
                                label="车辆厂商"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleModel"
                                label="车辆车型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleStyle"
                                label="车辆款型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="carNo"
                                label="车牌号"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleEnergyType"
                                label="车辆能源类型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registrationNature"
                                label="登记性质"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="applicationType"
                                label="申请类型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="leaseTerm"
                                label="租赁期限(月)"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="rentPaymentMethod"
                                label="租金支付方式"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="mileageLimit"
                                label="里程限制（公里)"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registeredCity"
                                label="上牌城市"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registrationFee"
                                label="上牌费"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="insurancePremium"
                                label="保险费"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="maintenancePremium"
                                label="维保费"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="purchaseTax"
                                label="购置税"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleAndVesselTax"
                                label="车船税"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="installationCost"
                                label="加装费用"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="otherExpenses"
                                label="其他费用"
                                min-width="120">
                            </el-table-column>
                          <el-table-column
                              align="center"
                              prop="irr"
                              label="IRR（含牌照）"
                              min-width="120">
                            <template v-slot="{row}">
                              <template v-if="row.irr">{{row.irr}}%</template>
                              <template v-else>--</template>
                            </template>
                          </el-table-column>
                            <el-table-column
                                align="center"
                                prop="margin"
                                label="保证金"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="monthlyRent"
                                label="每期租金"
                                min-width="120">
                            </el-table-column>
                          <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                            <template v-slot="{row}">
                              <template v-if="row.firstInstallmentRentalRatio">
                                {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                              </template>
                              <template v-else>
                                -- 、--
                              </template>

                            </template>
                          </el-table-column>
                          <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                            <template v-slot="{row}">
                              <template v-if="row.residualValueRatio">
                                {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                              </template>
                              <template v-else>
                                -- 、--
                              </template>

                            </template>
                          </el-table-column>
                            <el-table-column
                                align="center"
                                prop="suggestedPrice"
                                label="厂商指导价"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="purchasePrice"
                                label="新车采购单价"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="currentValuation"
                                label="旧车当前估值"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfApplications"
                                label="申请台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfUnitsPassed"
                                label="通过台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="rejectedUnits"
                                label="拒绝台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfUnitsUsed"
                                label="已使用台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfInvalidUnits"
                                label="作废台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfFrozenUnits"
                                label="冻结台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfFrozenUnits"
                                label="剩余可用台数"
                                min-width="120">
                              <template v-slot="{row}">
                                <span>{{ row.numberOfUnitsPassed - row.numberOfUnitsUsed -row.numberOfInvalidUnits -row.numberOfFrozenUnits}}</span>
                              </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="effectiveStatus"
                                label="通过台数状态"
                                min-width="120">
                                <template v-slot="{row}">
                                    <span>{{ row.effectiveStatus == 1 ? '生效中' : '已过期' }}</span>
                                </template>
                            </el-table-column>


                        </el-table>
                    </div>

                    <template v-if="needCreditReview==2">
                        <el-form-item label="说明:" prop="remark">
                            {{ results.remark|filterNull }}
                        </el-form-item>
                        <el-form-item label="附件:" class="form-img" style="margin-top: 40px">
                            <!--                    <ImageUpload info="上传附件" :limit="20" v-model="form.annex"></ImageUpload>-->
                        </el-form-item>
                    </template>
                </el-form>

            </div>

            <void-remaining-balance ref="voidRemainingBalance"></void-remaining-balance>
            <void-remaining-balance-info ref="voidRemainingBalanceInfo"></void-remaining-balance-info>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap flex-row-center-sb">
                <span>信审记录</span>
                <span></span>
            </div>
            <div>
                <el-table
                    :data="results.records"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                    <el-table-column
                        align="center"
                        prop="submitter"
                        label="提交人"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="submitTime"
                        label="提交时间"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="vehicleStyle"
                        label="状态"
                        min-width="120">
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.credit_review_status" :value="row.creditReviewStatus"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="remark"
                        label="不予准入说明"
                        min-width="120" show-overflow-tooltip>
                        <template v-slot="{row}">
                            {{row.remark|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="auditPerson"
                        label="审核人"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="handlingTime"
                        label="审核时间"
                        min-width="120">
                    </el-table-column>

                    <el-table-column
                        align="center"
                        prop="effectiveStatus"
                        label="操作"
                        min-width="120">
                        <template v-slot="{row}">
                            <e-button size="mini" type="text" @click="goCreditFilesDetail(row)"
                            >查看信审资料
                            </e-button>
                        </template>
                    </el-table-column>


                </el-table>

            </div>
        </div>
    </div>
</template>

<script>
import VoidRemainingBalance from "@/views/letterReview/letterReview/components/VoidRemainingBalance.vue";
import VoidRemainingBalanceInfo from "@/views/letterReview/letterReview/components/VoidRemainingBalanceInfo.vue";

import {getCrLimitDetails} from '@/api/letterReview/order'

export default {
    dicts: ['credit_review_status'],
    components: {
        VoidRemainingBalance,
        VoidRemainingBalanceInfo
    },
    props: {
        // results:{
        //     type:Object,
        //     default:()=>{
        //         return {}
        //     }
        // },
        needCreditReview: {
            type: Number,
            default: 2
        },
        // cancleOrderInfo: {
        //     type: Object,
        //     default: () => {
        //         return {}
        //     }
        // },
        // applicationNo:{
        //     type:String,
        //     default:''
        // },
    },
    data() {
        // 这里存放数据
        return {
            loading:false,
            results: {},
            applicationNo: 'XS111202312250001',
        }
    },
    created() {
        this.getDetail()
    },
    // 方法集合
    methods: {
        getDetail() {
            this.loading =true
            getCrLimitDetails(this.applicationNo).then(res => {
                this.results = res.data;
            }).finally(()=>{
                this.loading = false
            })
        },
        goCreditDetail(){
            this._toPage({
                name:'OrderReplySuggestionDetail',
                query:{
                    applicationNo:this.applicationNo
                }
            })
        },
        goCreditFilesDetail(){
            this._toPage({
                name:'OrderCreditFilesDetail',
                query:{
                    applicationNo:this.applicationNo
                }
            })
        },
        voidRemainingBalance() {
            this.$refs.voidRemainingBalance.show(this.applicationNo)
        },
        goVoidRemainingBalanceInfo() {
            this.$refs.voidRemainingBalanceInfo.show()
        }
    },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
    color: #464646;
    font-size: 14px;
    margin-right: 10px;

    span {
        color: #1884FF;
    }
}

.quota {
    font-size: 14px;
    color: #8C8C8C;
    position: relative;
    left: 12px;
}

.date {
    font-size: 14px;
    margin: 0 20px;
}
</style>
